<template>
  <el-dialog
    title="题目预览"
    :visible="showpreviewDialog"
    width="900px"
    @close="del"
  >
    <el-row>
      <el-col :span="6">
        <span v-if="preview.questionType === '1'"> 【题型】:单选题 </span>
        <span v-else-if="preview.questionType === '2'"> 【题型】:多选题 </span>
        <span v-else> 【题型】:简答题 </span>
      </el-col>
      <el-col :span="6">
        <span> 【编号】:{{ preview.id }} </span></el-col
      >
      <el-col :span="6">
        <span v-if="preview.difficulty === '1'"> 【难度】:简单 </span>
        <span v-else-if="preview.difficulty === '2'"> 【难度】:一般 </span>
        <span v-else> 【难度】:困难 </span>
      </el-col>
      <el-col :span="6">
        <span> 【标签】: {{ preview.tags }}</span></el-col
      >
    </el-row>
    <el-row style="padding: 10px 0px">
      <el-col :span="6">
        <span> 【学科】: {{ preview.subjectName }}</span></el-col
      >
      <el-col :span="6">
        <span> 【目录】: {{ preview.catalogID }}</span></el-col
      >
      <el-col :span="6">
        <span> 【方向】:{{ preview.direction }} </span></el-col
      >
    </el-row>
    <hr />
    <el-row>
      <el-col :span="6"
        >【题干】: <span v-html="preview.question"></span
      ></el-col>
      <el-col>
        <span v-if="preview.questionType === '1'">
          单选题 选项: (以下选中的选项为正确答案)
        </span>
        <span v-else-if="preview.questionType === '2'">
          多选题 选项: (以下选中的选项为正确答案)
        </span>
        <span v-else> 简答 选项: (以下选中的选项为正确答案) </span></el-col
      >
    </el-row>
    <el-row>
      <el-radio-group class='mos'
        v-model="radio"
        v-if="preview.questionType === '1'"
        @change="change"
      >
        <el-radio
          v-for="item in preview.options"
          :key="item.id"
          :label="item.isRight"
          >{{ item.title }}</el-radio
        >
      </el-radio-group>
      <el-checkbox-group v-model="checkList" v-else class="mos">
        <el-checkbox
          v-for="item in preview.options"
          :key="item.id"
          :label="item.isRight"
        >
          {{ item.title }}
        </el-checkbox>
      </el-checkbox-group>
    </el-row>
    <hr />
    <el-row>
      <el-col :span="6" style="padding: 10px 0px">
        【参考答案】:
        <el-button type="danger" size="small" @click="show = true"
          >视频答案预览</el-button
        ></el-col
      >
      <el-col v-if="show">
        <video
          :src="preview.videoURL"
          controls
          width="400px"
          height="300"
        ></video>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col  style="padding: 10px 0px">
     <span>【答案解析】:</span> {{answer}} </el-col
      >
    </el-row>
    <hr />
    <el-row>
      <el-col :span="6" style="padding: 10px 0px">
        <span> 【题目备注】: {{ preview.remarks }}</span></el-col
      >
    </el-row>
    <hr />
    <span slot="footer" class="dialog-footer">
      <el-button @click="del" type="primary">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'PreviewPage',
  props: {
    showpreviewDialog: {
      type: Boolean,
      default: false
    },
    preview: {
      type: Object,
      required: true
    },
    answer: {
      type: String,
      required: false
    }
  },
  data () {
    return {
      checkList: [1],
      show: false,
      radio: 1
    }
  },
  methods: {
    del () {
      this.$emit('update:showpreviewDialog', false)
    },
    // 单选框点击事件
    change () {
      this.radio = 1
    }
  }
}
</script>

<style scoped >
.mos {
  display: flex;
  flex-direction: column;
}
</style>